<script setup lang="ts">
const emits = defineEmits<{
  (e: 'close'): void
  (e: 'afterSubmit'): void
}>()

import { useFooter } from '@/hooks/useFooter'
import { ref } from 'vue'

const { createFooter } = useFooter('drawer')

const show = ref(false)

defineExpose({
  title: 'hello world',
  footer: createFooter({
    showSaveBtn: true,
    onSubmit() {
      console.log('submit')
      emits('afterSubmit')
    },
    onCancel() {
      emits('close')
    }
  })
})
</script>

<template>
  <div class="about">
    <a-button type="primary" @click="show = !show">click</a-button>
    <h1 v-if="show">This is an about page</h1>
  </div>
</template>

<style></style>
